<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dib{ 
            position: absolute;
            left: 332px;
            top: 75px;
        }

        .sss{
            width: 100%;
            height: 30px;
            background-color: aqua;
        }
        th,td{
            width: 200px;
            height: 40px;
            border: 1px solid black;
        }
        table{
            position: absolute;
            top: 200px;
        }
        span{
            position: absolute;
            right: 10px;
        }
        .sss{
            position: absolute;
            top: 165px;
        }
        .hh{
            position: absolute;
            left: 695px;
        }
    </style>
        <link rel="stylesheet" href="./font_whu9356njyb/iconfont.css">
        <link rel="stylesheet" href="./font_b2hwf7otkj/iconfont.css">
</head>
<body background="../R.jpg">
            <h1 class="hh">学生就业统计表</h1>
        <p class="dib"><input type="text" placeholder="姓名" class="xm"><input type="text" placeholder="年龄" class="nl"><input type="text" placeholder="薪资" class="xz"><input type="text" placeholder="男"><input type="text" placeholder="北京"><button onclick="tj()" class="iconfont icon-tianjia">添加</button></p>

    <div class="sss"><span class="zoji"></span></div>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>录入时间</th>
                <th>操作</th>
            </tr>
        </thead>
       <tbody>

       </tbody>
    </table>
</body>
</html>
<script>
    function cun(arr){
        localStorage.setItem('hah',JSON.stringify(arr))
    }
    function qu(){
        var a=localStorage.getItem('hah')
        if(a!=null){
            return JSON.parse(a)
        }else{
            return []
        }
    }


    var input=document.querySelectorAll('input')
    var tbody=document.querySelector('tbody')
    var zoji=document.querySelector('.zoji')
    var tjj=document.querySelector('.tjj')
    var xm=document.querySelector('.xm')
    var xb=document.querySelector('.nl')
    var xz=document.querySelector('.xz')

    function tj(){
        if(xm.value==''||xb.value==''||xz.value==''){
            alert('内容不可以为空')
            return
        }

        var aa=qu()
        aa.push({
            p1:input[0].value,
            p2:input[1].value,
            p3:input[2].value,
            p4:input[3].value,
            p5:input[4].value,
            p6:new Date().toLocaleString().replace('/','/')
        });
        cun(aa)
        xr()
    }


    function xr(){
        tbody.innerHTML='';
        var aa=qu();
        var ss=0;
        for(var i=0;i<aa.length;i++){
            var tr=document.createElement('tr')
            tr.innerHTML=`
            <th>${i+1}</th>
            <th>${aa[i].p1}</th>
            <th>${aa[i].p2}</th>
            <th>${aa[i].p4}</th>
             <th>${aa[i].p3}</th>
            <th>${aa[i].p5}</th>
            <th>${aa[i].p6}</th>
            <th><button onclick="sc(${i})" class="iconfont icon-shanchu">删除</button></th>
            `;
            tbody.appendChild(tr)
            ss++
        }
        zoji.innerHTML='共有数据'+ss+'条'
    }
    xr()

    function sc(index){
        var aa=qu()
        aa.splice(index,1)
        cun(aa)
        xr()
    }
</script>